<template>
  <div class="dashboard-container">
    <div class="dashboard-text">name: {{ name }}</div>
    <svg-icon class-name="abc" icon-class="user" />

    <div :msg="obj.msg" :info="obj.info">测试v-bind</div>
    <!-- 如果直接把对象绑定到v-bind上，那么对象里面的所有属性都会绑定在标签上 -->
    <div v-bind="obj">测试v-bind</div>

    <!-- __________________________ -->
    <!-- 渲染动态组件 -->
    <!-- <component :is="activeName">跳转</component> -->
    <!-- <component :is="activeName" :href="url">跳转</component> -->
    <component :is="activeName" v-bind="info">跳转</component>
    <button @click="activeName = 'TestB'">点击</button>
    <button @click="activeName = 'a'">渲染a标签</button>
    <component :is="TestB">直接渲染</component>
    <RenderTest />
    <hr />
    <!-- 这个上面绑定的就是要将什么数据传输给子组件 -->
    <MyTreeTest :list="list">
      <!-- <template v-slot="{ row }"> {{ row.uname }} </template> -->
      <template v-slot="{ row }">
        <div v-if="row.uname === 'jerry'" style="color: red">{{ row.uname }}</div>
        <div v-else>{{ row.uname }}</div>
      </template>
    </MyTreeTest>
  </div>
</template>

<script>
import TestA from './component/TestA.vue'
import TestB from './component/TestB.vue'
import RenderTest from './component/Render.vue'
import MyTreeTest from './component/MyTreeTest.vue'
import { mapGetters } from 'vuex'

export default {
  name: 'Dashboard',
  components: { TestA, TestB, RenderTest, MyTreeTest },
  data() {
    return {
      list: [
        {
          id: 1,
          uname: 'tom'
        },
        {
          id: 2,
          uname: 'jerry'
        },
        {
          id: 3,
          uname: 'spike'
        }
      ],
      info: {
        href: 'http://www.baidu.com',
        class: 'active'
      },
      url: 'http://www.baidu.com',
      activeName: 'TestA',
      TestB: 'TestB',
      obj: { msg: 'hello', info: '123' }
    }
  },
  computed: {
    ...mapGetters(['name'])
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
</style>
